<template>
	<view>
		<view v-if="detailInfo.processState=='ACTIVE'" class="bg-white padding-sm">
			<view class="between_layout">
				<view class="info-title">当前任务信息</view>
				<view>
					<view v-if="detailInfo.currentActivities && detailInfo.currentActivities.length > 1"
						class="end_layout">
						<u-button @click="lastTable" :disabled="currentActivitiesIndex == 0" type="primary" size="mini"
							text="上一个"></u-button>
						<u-button @click="nextTable"
							:disabled="currentActivitiesIndex == detailInfo.currentActivities.length-1" type="primary"
							size="mini" text="下一个"></u-button>
					</view>
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">任务名称：</view>
				<view>{{ detailInfo.currentActivities[currentActivitiesIndex].activityName }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">任务状态：</view>
				<view>
					<u-tag size="mini" text="待处理"
						v-if="detailInfo.currentActivities[currentActivitiesIndex].activityState"
						type="success"></u-tag>
					<u-tag size="mini" v-else text="任务处理中" type="warning"></u-tag>
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">任务开始时间：</view>
				<view> {{ detailInfo.currentActivities[currentActivitiesIndex].activityStartTime }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">任务预警天数：</view>
				<view>
					{{ detailInfo.currentActivities[currentActivitiesIndex].daysOfWarning?detailInfo.currentActivities[currentActivitiesIndex].daysOfWarning + '个工作日':'-' }}
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">任务待办人：</view>
				<view> {{ detailInfo.currentActivities[currentActivitiesIndex].pendingPerson }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">任务预警：</view>
				<view>
					{{detailInfo.currentActivities[currentActivitiesIndex].lightOn?warningArr.filter(a=>a.dictValue==detailInfo.currentActivities[currentActivitiesIndex].lightOn)[0].dictLabel:'-'}}
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">任务预警结束时间：</view>
				<view> {{ detailInfo.currentActivities[currentActivitiesIndex].endTime }}</view>
			</view>
		</view>
		<view v-if="detailInfo.processState!='NOT_YET_STARTED'" class="bg-white padding-sm margin-top-sm">
			<view class="info-title">业务信息</view>
			<view class="info-item">
				<view class="info-label">业务名称：</view>
				<view>{{ detailInfo.processInstance.processName }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">业务状态：</view>
				<view>
					{{detailInfo.processInstance.processState?processArr.filter(a=>a.dictValue==detailInfo.processInstance.processState)[0].dictLabel:'-'}}
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">启动时间：</view>
				<view> {{ detailInfo.processInstance.processStartTime }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">结束时间：</view>
				<view>
					{{ detailInfo.processInstance.processEndTime ? detailInfo.processInstance.processEndTime : '未结束' }}
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">预设完成周期：</view>
				<view>
					{{ detailInfo.processInstance.daysOfWarning?detailInfo.processInstance.daysOfWarning+'个工作日':'未预设' }}
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">预警时间：</view>
				<view> {{ detailInfo.processInstance.endTime }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">距启动时间：</view>
				<view>
					{{ detailInfo.processInstance.processTotalTime ? detailInfo.processInstance.processTotalTime : '' }}
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">总用时间：</view>
				<view>
					{{ detailInfo.processInstance.processTotalTime ? detailInfo.processInstance.processTotalTime : '' }}
				</view>
			</view>
			<view class="info-item">
				<view class="info-label">业务发起人：</view>
				<view> {{ detailInfo.processInstance.processStarter }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">业务预警：</view>
				<view>
					{{detailInfo.processInstance.lightOn?warningArr.filter(a=>a.dictValue==detailInfo.processInstance.lightOn)[0].dictLabel:'-'}}
				</view>
			</view>
		</view>
		<view v-if="detailInfo.processHistory && detailInfo.processHistory.length > 0"
			class="bg-white padding-sm margin-top-sm">
			<view class="info-title">时间轴</view>
			<view class="cu-timeline">
				<view v-for="(item,index) in detailInfo.processHistory" :key="index" class="cu-item text-blue">
					<view style="border: 1px solid #999999;" class="content bg-white">
						<view class="info-item">
							<view class="info-label">任务名称：</view>
							<view>{{ item.activityName }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">任务开始时间：</view>
							<view>{{ item.activityStartTime }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">任务处理人：</view>
							<view>{{ item.processor }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">任务结束时间：</view>
							<view>{{ item.activityEndTime }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">任务操作：</view>
							<view>{{ item.auditOpinion }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">任务用时：</view>
							<view>{{ item.activityTotalTime }}</view>
						</view>
						<view v-if="item.activityName!='开始'&&item.activityName!='结束'" class="info-item">
							<view class="info-label">办理时间：</view>
							<view>{{ item.taskComment ? item.taskComment.handlingTime : "--" }}</view>
						</view>
						<view class="info-item">
							<view class="info-label">节点预警信息：</view>
							<view>
								{{item.activityState?warningArr.filter(a=>a.dictValue==item.activityState)[0].dictLabel:'-'}}
							</view>
						</view>
						<view v-if="item.activityName!='开始'&&item.activityName!='结束'" class="info-item">
							<view class="info-label">附件：</view>
							<view @click="showDetail(item.taskComment.filesUrl)"
								v-if="item.taskComment && item.taskComment.filesUrl">附件</view>
							<view v-else>-</view>
						</view>
						<view v-if="item.activityName!='开始'&&item.activityName!='结束'" class="info-item">
							<view class="info-label">备注：</view>
							<view>{{ item.taskComment?item.taskComment.remarks:'--' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDicts
	} from '@/utils/api.js'
	import {
		openFile
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				currentActivitiesIndex: 0,
				warningArr: [],
				processArr: []
			};
		},
		props: {
			detailInfo: {
				type: Object,
				default: () => {}
			}
		},
		mounted() {
			//节点预警信息
			getDicts('lcjdzt').then(res => {
				this.warningArr = res.data
			})
			//流程状态
			getDicts('lczt').then(res => {
				this.processArr = res.data
			})
		},
		methods: {
			//当前任务上一个数据
			lastTable() {
				this.currentActivitiesIndex = this.currentActivitiesIndex - 1
			},
			//当前任务下一个数据
			nextTable() {
				this.currentActivitiesIndex = this.currentActivitiesIndex + 1
			},
			//打开文件
			showDetail(url) {
				if (url) {
					openFile(url)
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.tab-area {
		background-color: #fff;
		padding: 10rpx 20rpx;
	}

	.info-box {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 10rpx 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
		margin: 15rpx 0;

		.info-label {
			color: #999999;
			flex-shrink: 0;
		}
	}

	.btn-default {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #1478FF;
		background: #FFFFFF;
		border-radius: 50rpx;
		border: 1rpx solid #1478FF;
		padding: 24rpx;
		width: 300rpx;
		text-align: center;
	}

	.btn-active {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #1478FF;
		border-radius: 50rpx;
		border: 1rpx solid #1478FF;
		padding: 24rpx;
		width: 300rpx;
		text-align: center;
	}

	.radio-btn {
		width: 130rpx;
		height: 100rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	.state-area {
		padding: 30rpx;
	}

	.r-tag {
		color: #1478FF;
	}

	.l-tag {
		flex-shrink: 0;
		margin-right: 24rpx;
	}
</style>